<template>
  <div class="wapperBpx">
    <div class="wapperBpx_header">
      <div class="options">
        <el-select v-model="passNo" placeholder="请选择通道">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :clear="false"
          />
        </el-select>
      </div>
      <div class="date">
        <el-date-picker
          v-model="dateTime"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        />
      </div>
      <el-button type="primary" :icon="Search" @click="getData">查询</el-button>
    </div>
    <div class="container" id="chartId" ref="myChart"></div>
  </div>
</template>

<script setup lang="ts" name="basetable">
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { getLineChart, getLineChartQueryTime } from "../../../api/index";
import moment from "moment";
import { useRoute } from "vue-router";
import { initChart } from "./CreateEchar";
const myChart = ref(null);
const route = useRoute();

const passNo = ref("1");
const dateTime = ref([
  moment(new Date()).format("YYYY-MM-DD"),
  moment(new Date()).format("YYYY-MM-DD"),
]);
const options = [
  {
    value: "1",
    label: "通道1",
  },
  {
    value: "2",
    label: "通道2",
  },
  {
    value: "3",
    label: "通道3",
  },
  {
    value: "0",
    label: "全部通道",
  },
];

onMounted(() => {
  getTime();
});

const getTime = async () => {
  const res: any = await getLineChartQueryTime(route.query.testNo);

  if (res.code === 200) {
    startDate.value = res.rows.startDate || "";
    endDate.value = res.rows.endDate || "";
    passNo.value = res.rows.passNo || "";
    getData();
  } else {
    ElMessage.error(res.msg);
  }
};

const startDate = ref("");
const endDate = ref("");
const xData = ref([]);
const data1 = ref([]);
const data2 = ref([]);
const getData = async () => {
  const pramsData = {
    testNo: route.query.testNo,
    passNo: passNo.value,
    startDate:
      startDate.value.length > 12
        ? startDate.value
        : startDate.value
        ? `${startDate.value} 00:00:00`
        : "",
    endDate:
      endDate.value.length > 12
        ? endDate.value
        : endDate.value
        ? `${endDate.value} 00:00:00`
        : "",
    // startDate: '2022-10-14 00:00:00',
    // endDate: '2022-10-15 00:00:00'
  };
  const res: any = await getLineChart(pramsData);
  if (res.code === 200) {
    const { rows } = res;
    const x: any = [];
    const d1: any = [];
    const d2: any = [];
    rows.typeOne.map((item: any) => {
      x.push(item.time);
      d1.push(item.difference);
    });
    rows.typeTwo.map((item: any) => {
      if (!x.length) {
        x.push(item.time);
      }
      d2.push(item.difference);
    });
    xData.value = x;
    data1.value = d1;
    data2.value = d2;
    initChart(data1.value, data2.value, xData.value);
  } else {
    xData.value = [];
    data1.value = [];
    data2.value = [];
    initChart(data1.value, data2.value, xData.value);
    ElMessage.error(res.msg);
  }
};
</script>
<style scoped lang="less">
@import "./index.less";
</style>
